<template>
  <div class="list">
    <van-nav-bar title="类别列表" />

    <div class="content clearFix">
      <!-- 左侧列表 -->
      <ul class="sidebar">
        <li
          v-for="(item,idx) of filterCategoryList(categoryList)"
          :key="item.id"
          @click="slidebarClick(item.id,idx)"
          :class="slidebarCurrent === idx ? 'active' : null"
        >{{item.mallCateforyName}}</li>
      </ul>

      <!-- 顶部导航栏 -->
      <div class="tabs">
        <ul class="topbar">
          <li
            v-for="(item,idx) of filterCategoryList(categorySubList)"
            :key="item.id"
            @click="topbarClick(item.id,idx)"
            :class="topbarCurrent === idx ? 'active' : null"
          >{{item.mallSubName}}</li>
        </ul>
        <div class="container">
          <div class="goodsList clearFix" v-for="item of categorySub" :key="item.id">
            <router-link :to="{path:'/details',query:{id:item.id}}">
              <van-image class="image" :src="item.image1" lazy-load>
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              <div class="info">
                <p>{{item.name}}</p>
                <p>
                  <span class="new">现价:{{item.presentPrice}}</span>
                  <span class="old">原价:{{item.oriPrice}}</span>
                </p>
              </div>
            </router-link>
          </div>
        </div>
      </div>
      <tab-bar></tab-bar>
    </div>
  </div>
</template>

<script>
import * as api from "@/request/api/list.js";
export default {
  data() {
    return {
      categoryList: [], //大类数据
      categorySubList: [], //小类数据
      categorySub: [], //商品列表数据
      slidebarCurrent: 0, //左侧列表索引值
      topbarCurrent: 0 //顶部导航栏索引值
    };
  },
  methods: {
    //读取大类数据的接口
    async API_getCategoryList() {
      return await api.getCategoryList();
    },
    //读取小类数据的接口
    async API_getCategorySubList(categoryId) {
      return await api.getCategorySubList({
        categoryId: categoryId
      });
    },
    //读取商品列表的接口
    async API_getGoodsListByCategorySubID(categorySubId) {
      return await api.getGoodsListByCategorySubID({
        categorySubId: categorySubId
      });
    },

    // 过滤不存在的商品列表
    filterCategoryList(arr) {
      return arr.filter((item, idx) => {
        return idx < 5;
      });
    },

    //点击左侧列表
    async slidebarClick(id, idx = 0) {
      let res2 = await this.API_getCategorySubList(id);
      this.categorySubList = res2.data.data;

      let res3 = await this.API_getGoodsListByCategorySubID(
        res2.data.data[0].id
      );
      this.categorySub = res3.data.data;
      this.slidebarCurrent = idx;
    },
    // 点击顶部导航栏
    async topbarClick(id, idx = 0) {
      let res3 = await this.API_getGoodsListByCategorySubID(id);
      this.categorySub = res3.data.data;
      this.topbarCurrent = idx;
    }
  },

  async created() {
    let res = await this.API_getCategoryList();
    let res2 = await this.API_getCategorySubList(res.data.data[0].id);
    let res3 = await this.API_getGoodsListByCategorySubID(res2.data.data[0].id);
    this.categoryList = res.data.data;
    this.categorySubList = res2.data.data;
    this.categorySub = res3.data.data;
    //console.log(res)
    //this.$eventBus.$emit("getCategoryList", res.data.data);
  }
};
</script>
<style lang="scss">
@import "@/style/list/list.scss";
</style>